<template>
	<div :class="['message-input', !isPC && 'message-input-h5']">
		<MessageInputAudio :class="[
        'message-input-audio',
        isWeChat && 'message-input-wx-audio',
        isFunctionShow('audio') && 'message-input-wx-audio-open',
      ]" @switchAudio="switchAudio" :isAudioMainShow="isFunctionShow('audio')"></MessageInputAudio>
		<MessageInputEditor v-show="!isFunctionShow('audio')" class="message-input-editor" ref="editor"
			:placeholder="props.placeholder" :isMuted="props.isMuted" :muteText="props.muteText"
			:enableInput="props.enableInput" :enableAt="props.enableAt" :enableTyping="props.enableTyping"
			:isGroup="isGroup" @sendMessage="sendMessage" @onTyping="onTyping" @onAt="onAt" @onFocus="onFocus"
			@onInput="onInput">
		</MessageInputEditor>
		<MessageInputAt v-if="props.enableAt" ref="messageInputAtRef" @insertAt="insertAt" @onAtListOpen="onAtListOpen">
		</MessageInputAt>

		<div class="message-input-emoji" @click="switchEmojiAndFeature('emoji')">
			<Icon :file="faceIcon" class="icon icon-face"></Icon>
		</div>
		<div v-if="inputText.length==0 && isChat" class="message-input-emoji" @click="switchEmojiAndFeature('gift')">
			<!-- <Icon :file="giftIcon" class="icon icon-face" style="margin: 7px 0px;width:30px;height: 30px;"></Icon> -->
			<image src="../../../assets/icon/gift.png" mode="widthFix"
				style="width: 28px; height: 28px; margin-right: 6px;"></image>
		</div>
		<div v-if="inputText.length==0" class="message-input-more" @click="switchEmojiAndFeature('more')">
			<Icon :file="moreIcon" class="icon icon-more"></Icon>
		</div>

		<div class="message-input-emoji-picker gifts" v-show="isFunctionShow('gift')">
			<GiftPickerDialog @insertEmoji="insertEmoji" @sendMessage="sendMessage"></GiftPickerDialog>
		</div>

		<div class="message-input-emoji-picker" v-show="isFunctionShow('emoji')">
			<EmojiPickerDialog @insertEmoji="insertEmoji" @sendMessage="sendMessage"></EmojiPickerDialog>
		</div>
		<div v-if="inputText.length>0" class="message-input-emoji"
			style="font-size: 20rpx;height: 37px;display: flex;align-items: center;justify-content: center;"
			@click="sendMessage">
			<span style="background: #2ba245;color:white;padding: 8rpx 20rpx; border-radius: 10rpx;">
			发送	
			</span>
			<!-- <image src="https://xbb.fuliaoxx.com/img/call/send.png" mode="widthFix" style="width:100rpx;"></image> -->
		</div>
<!-- 		<view class="arrearage-bg" v-if="chongzhi" :style="{position:'fixed',height:'100vh',width:'750rpx'}">
			<image @click="fto('/pages/my/wallet')" class="arrearage"
				src="https://xbb.fuliaoxx.com/img/call/arrearage.png" mode="widthFix">
			</image>
		</view> -->
	</div>
</template>
<script setup lang="ts">
	import TUIChatEngine, {
		TUIGlobal,
		TUIStore,
		StoreName,
		IConversationModel,
	} from "@tencentcloud/chat-uikit-engine";
	import { ref, nextTick } from "../../../adapter-vue";
	import MessageInputEditor from "./message-input-editor.vue";
	import MessageInputAt from "./message-input-at/index.vue";
	import MessageInputAudio from "./message-input-audio.vue";
	import EmojiPickerDialog from "../message-input-toolbar/emoji-picker/emoji-picker-dialog.vue";
	// import GiftPickerDialog from "../message-input-toolbar/gift-picker/gift-picker-dialog.vue";
	import Icon from "../../common/Icon.vue";
	import faceIcon from "../../../assets/icon/face-uni.png";
	import moreIcon from "../../../assets/icon/more-uni.png";
	import giftIcon from "../../../assets/icon/gift.png";

	import { sendMessages, sendTyping } from "../utils/sendMessage";

	const props = defineProps({
		placeholder: {
			type: String,
			default: "this is placeholder",
		},
		replyOrReference: {
			type: Object,
			default: () => ({}),
			required: false,
		},
		isChat: {
		    type: Boolean,
		    default: false
		},
		isMuted: {
			type: Boolean,
			default: true,
		},
		muteText: {
			type: String,
			default: "",
		},
		enableInput: {
			type: Boolean,
			default: true,
		},
		enableAt: {
			type: Boolean,
			default: true,
		},
		enableTyping: {
			type: Boolean,
			default: true,
		},
	});
	const chongzhi = ref(false)
	const emit = defineEmits([
		"sendMessage",
		"resetReplyOrReference",
		"onTyping",
		"handleToolbarListShow",
	]);
	const replyOrReference = ref();
	const editor = ref();
	const moreShow = ref(false);
	const messageInputAtRef = ref();
	const currentConversation = ref<typeof IConversationModel>();
	const isPC = ref(TUIGlobal.getPlatform() === "pc");
	const isH5 = ref(TUIGlobal.getPlatform() === "h5");
	const isWeChat = ref(TUIGlobal.getPlatform() === "wechat");
	const isApp = ref(TUIGlobal.getPlatform() === "app");
	const currentFunction = ref<string>("");
	const isGroup = ref<boolean>(false);

	TUIStore.watch(StoreName.CONV, {
		currentConversation: (conversation : typeof IConversationModel) => {
			currentConversation.value = conversation;
			isGroup.value =
				currentConversation?.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
		},
	});

	const switchAudio = (isAudioShow : boolean) => {
		if (isAudioShow) {
			switchEmojiAndFeature("audio");
		} else {
			switchEmojiAndFeature("");
		}
	};

	const switchEmojiAndFeature = (funcName : string) => {
		if (funcName == 'emoji' || funcName == 'gift' || funcName == 'audio') {
			if (moreShow.value == true) {
				nextTick(() => {
					emit("handleToolbarListShow");
				});
			}
			if (currentFunction.value == funcName) {
				currentFunction.value = "";
			} else {
				moreShow.value = false
				currentFunction.value = funcName;
			}
		} else {
			currentFunction.value = "";
			moreShow.value = true
			nextTick(() => {
				emit("handleToolbarListShow");
			});
		}
		// console.log('c:'+currentFunction.value +'---d:'+funcName)
		// if (currentFunction.value === 'emoji' || currentFunction.value === 'gift') {
		// 	if (funcName === 'emoji' || funcName === 'gift') {
		// 		if (currentFunction.value == funcName) {
		// 			currentFunction.value = "";
		// 		} else {
		// 			currentFunction.value = funcName;
		// 		}
		// 	}
		// 	if (funcName === 'more') {
		// 		currentFunction.value = "";
		// 		nextTick(() => {
		// 			emit("handleToolbarListShow");
		// 		});
		// 	}
		// } else if (currentFunction.value === 'more') {
		// 	emit("handleToolbarListShow");
		// 	if (funcName === 'more') {
		// 		currentFunction.value = "";
		// 	} else {
		// 		nextTick(() => {
		// 			currentFunction.value = funcName;
		// 		});
		// 	}
		// } else {
		// 	if (funcName === 'more') {
		// 		emit("handleToolbarListShow");
		// 	}else{
		// 		if(currentFunction.value==''){
		// 			nextTick(() => {
		// 				emit("handleToolbarListShow");
		// 			});
		// 		}
		// 	}
		// 	currentFunction.value = funcName;
		// }
	};

	const isFunctionShow = (funcName : string) => {
		if (currentFunction.value === funcName) {
			return true;
		}
		return false;
	};

	const onTyping = (inputContentEmpty : boolean, inputBlur : boolean) => {
		sendTyping(inputContentEmpty, inputBlur);
	};
	const inputText = ref('')
	const onInput = (text : any) => {
		inputText.value = text
	};
	const onAt = (show : boolean) => {
		messageInputAtRef?.value?.toggleAtList(show);
	};

	const onFocus = (keyboardHeight ?: number) => {
		if (isH5.value) {
			switchEmojiAndFeature("");
		}
	};

	const resetReplyOrReference = () => {
		console.warn("resetReplyOrReference");
	};

	const sendMessage = async () => {
		let messageList;
		if (editor?.value?.getEditorContent) {
			messageList = editor?.value?.getEditorContent();
		}
		editor?.value?.resetEditor && editor?.value?.resetEditor();
		resetReplyOrReference();
		await sendMessages(
			messageList,
			currentConversation.value,
			replyOrReference.value
		);
		inputText.value = ''
		emit("sendMessage");
	};

	const insertEmoji = (emoji : any) => {
		editor?.value?.addEmoji && editor?.value?.addEmoji(emoji);
	};

	const insertAt = (atInfo : any) => {
		editor?.value?.insertAt && editor?.value?.insertAt(atInfo);
	};

	const onAtListOpen = () => {
		editor?.value?.blur && editor?.value?.blur();
	};

	// 消息撤回后重新编辑
	const reEdit = (content : any) => {
		editor?.value?.resetEditor();
		resetReplyOrReference();
		editor?.value?.setEditorContent(content);
	};

	defineExpose({
		insertEmoji,
		reEdit,
	});
</script>

<style scoped lang="scss">
	@import url("../../../assets/styles/common.scss");

	.message-input {
		position: relative;
		display: flex;
		flex-direction: column;
		border: none;
		height: 100%;
		width: 100%;
		max-height: 100%;
		max-width: 100%;
		overflow: hidden;
		background: #ebf0f6;

		&-editor {
			flex: 1;
			display: flex;
		}

		&-button {
			width: fit-content;
		}

		.icon {
			width: 23px;
			height: 23px;

			&-face {
				margin: 7px;
			}

			&-more {
				margin: 7px 0px;
			}
		}

		&-wx {
			&-audio {
				&-open {
					flex: 1;
				}
			}
		}

		&-emoji-picker {
			padding-top: 10px;
		}
	}

	.message-input-h5 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		height: calc(100% - 20px);
		width: calc(100% - 20px);
		max-height: 100%;
		// max-width: calc(100% - 20px);
		padding: 10px;
		overflow: hidden;

	}
	*{
		box-sizing: border-box;
	}
</style>